<template>
    <div>
        <!-- <div style="background-color: #FFFFFF;" >
            <div class="left" >
                <div class="icon_back"  @click="goback()">
                    <img   src="@/assets/images/povertyAlleviation/fire_return.png">
                </div>
            </div>
            <div class="center" >灭火财宝</div>
       </div> -->
       <div class="firebanner" ></div>

        <div class="service_bg_fire" >
            <!-- <img  @click="pycho_return()" style="width: 14px;height: 22px;position: absolute;left: 5%;z-index: 999; " src="common/image/valueAdded/pycho_return.png" alt=""> -->
            <div class="container_wrapper_fire">
                <div class="videoBox"> 
                    <video  id="media"  class="media"    controls playsinline="true" webkit-playsinline="true" x5-playsinline=""  x-webkit-airplay="allow">
                        <!-- <source src="http://wechattest.chinalife-p.com.cn/wechatpageview/common/video/fire.ogg" type="video/ogg"> -->
                        <source src="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/fire.mp4" type="video/mp4">
                        <!-- <source src="http://wechattest.chinalife-p.com.cn/wechatpageview/common/video/fire.webm" type="video/webm"> -->
                        <object data="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/fire.mp4" width="320" height="240">
                            <embed width="320" height="167" src="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/fire.mp4">
                        </object>
                    </video>
                    <div class="video-img"   @click="fireurl1()" v-show="firehide1">
                        <img style="width: 40px;height: 40px; position: relative; top: 74px;"  src="@/assets/images/povertyAlleviation/icon_play.png" alt="">
                    </div>
                </div>
                <div class="videoBox1" style="">
                    <video id="media1" class="media1"  controls   playsinline="true" webkit-playsinline="true" x5-playsinline=""  x-webkit-airplay="allow"   >
                        <!-- <source src="common/video/fire.ogg" type="video/ogg"> -->
                        <source src="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/introduction.mp4" type="video/mp4">
                        <!-- <source src="common/video/fire.webm" type="video/webm">crossorigin="anonymous"  -->
                        <object data="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/introduction.mp4" width="320" height="240">
                            <embed width="320" height="167" src="http://wechat.chinalife-p.com.cn/wechatpageview/common/video/introduction.mp4">
                        </object>
                    </video>
                    <div class="video-img1"  @click="fireurl2()" v-show="firehide2">
                        <img style="width: 40px;height: 40px; position: relative; top: 74px;" src="@/assets/images/povertyAlleviation/icon_play.png" alt="">
                    </div>
                </div>
                <div @click="firebt()" class="bottom" style=" ">
                    <img style="" src="@/assets/images/povertyAlleviation/fireBottom.png" alt="">
                    <span style=" ">点击购买</span>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import { log } from '@/utils';
import Header from '@/components/Header.vue';
import { Component, Vue, Prop } from 'vue-property-decorator';
import { Dialog } from 'vant';
Vue.use(Dialog);
@Component({
  components: { Header },
})
export default  class Myinsuretwo extends Vue{
    firehide1 : any = true
    firehide2 : any = true
    media:any = {}
    data(){
        return{
            firehide1: true,
            firehide2: true
        }
    }
    goback(){
        this.$router.back();
    }
    pycho_return(){

    }
    fireurl1 () {
        var Media = document.getElementById("media") as HTMLVideoElement
        Media.play();
        // console.log(Media);
        
        this.firehide1 = false;
    }
    fireurl2(){
        var media1 = document.getElementById("media1") as HTMLVideoElement
        media1.play();
        // console.log(Media);
        
        this.firehide2 = false;
    }
    firebt(){
        Dialog.alert({
            message: '跳转至第三方中国人寿电商公司页面',
            confirmButtonColor: 'green'
        }).then(() => {
            // on close
            window.location.replace("https://m.chinalifeshop.com.cn/pages/package-B/goods/goods-details/index?skuId=ff80808172bdb4540172c61076bb0044&utm_source=GSCX&utm_medium=GSCB");
        });
    }
    created(){
        
    }
    mounted(){

    }
    
}
</script>
<style lang="less" scopeds>
    .left{
        .icon_back{
            margin-top: 13px;
            margin-left: 12px;
            float: left;
            img{
                width: 10px;
                height: 17px;
            }
        }
    }
    .center{
        line-height: 44px;
        margin-top: 0.1rem;
        font-size: 16px;
        color: #333333;
        font-weight: bold;
        text-align: center;
    }
    .firebanner{
         width: 100%; 
         height: 133px; 
         background-image: url(../../assets/images/povertyAlleviation/firebannerT.png); 
         background-size: 100% 100%; 
         background-repeat: no-repeat;
    }
    .container_wrapper_fire{
        background:#FFFFFF;
        border-top-left-radius: 25px;
        border-top-right-radius:25px;
        height: auto;
        width: 100%;
        margin-top: 28.5px;
        overflow: scroll;
        text-align: center;
        padding-top: 33px;
    }
    .video-img{
        width: 300px;
        height: 170px;
        margin: auto;
        position: relative;
        top: -207px;
        background: url(../../assets/images/povertyAlleviation/fireposter1.png) no-repeat;
        background-size: 300px 170px;
        cursor: pointer;
    }
    .media{
        object-fit:contain;
        object-position: top -10px;
        width: 300px;
        height: 240px;
    }
    .media1{
        object-fit:contain;
        object-position: top -10px;
        width: 300px;
        height: 240px;
    }
    .videoBox{
        width: 320px;
        height: 240px;
        margin: auto;
        margin-bottom: 30px;
    }
    .video-img1{
        width: 300px;
        height: 170px;
        margin: auto;
        position: relative;
        top: -207px;
        background: url(../../assets/images/povertyAlleviation/fireposter2.png) no-repeat;
        background-size: 300px 170px;
        cursor: pointer;
    }
    .bottom{
        color: #C2C2C2; 
        font-size: 16px; 
        text-align: center; 
        padding-bottom: 27.5px; 
        width: 309px; 
        margin: auto; 
        margin-top: 37.5px;
        img{
            height: 110px; 
        }
        span{
            display: inline-block; 
            position: relative; 
            left: -16%; 
            top: -48px; 
            height: 26px; 
            width: 90px; 
            line-height: 26px; 
            background: #009B63; 
            color: #fff; 
            font-size: 13px; 
            border-radius: 3px;
        }
    }
    .videoBox1{
        margin-top: 37.5px;
        width: 320px;
        height: 240px;
        margin: auto;
    }
</style>